<template>
  <div id="header" class="head"></div>
</template>

<script>
import { navs } from './navs'
export default {
  name: 'Header',
  props: ['show'],
  data () {
    return {
      navs,
      searchBarFixed: false,
      prevent: false
    }
  },
  watch: {
    '$route': ['initNav']
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.searchBarFixed = scrollTop > 0
    },
    // 有头部组件引入时 导航改变*后*需要做什么
    initNav () {
      let path = this.$route.path
      if (path === '/') {
        this.navIdx = -1
      } else if (new RegExp('/data-statistics').test(path)) {
        this.navIdx = 2
      } else {
        this.navIdx = this.navs.findIndex(item => new RegExp('^' + item.path).test(path))
      }
    },
    linkTo (idx, path) {
      if (this.prevent) return false
      this.prevent = true
      this.navIdx = idx
      this.$router.push(path)
      setTimeout(() => {
        this.prevent = false
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.head { }
</style>
